<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .span-line-begin {
            background-color: blue;
            position: relative;
            margin-right: 8px;
        }

        .span-line-begin:after {
            content: "";
            position: absolute;
            display: inline-block;
            width: 0;
            height: 0;
            border-top: 10px solid transparent;
            border-left: 10px solid blue;
            border-bottom: 10px solid transparent;
        }

        .span-line-end {
            background-color: blue;
            position: relative;
            margin-left: 8px;
        }

        .span-line-end::after {
            content: "";
            left: -10px;
            position: absolute;
            display: inline-block;
            width: 0;
            height: 0;
            border-top: 10px solid transparent;
            border-right: 10px solid blue;
            border-bottom: 10px solid transparent;
        }


        #triangle_right {
            width: 0;
            height: 0;
            /*border-top: 70px solid transparent;*/
            /*border-left: 140px solid #ff5a00;*/
            /*border-bottom: 70px solid transparent;*/

            /*border: 70px solid black;*/

            border-top: 70px solid black;
            border-left: 140px solid #ff5a00;
            /*border-right: 140px solid #ff5a00;*/
            /*border-bottom: 70px solid black;*/
        }
    </style>
    <title>test</title>

</head>

<body>
<span>6152</span>
<span class="span-line-begin">&lt;111&gt;</span>
<span class="span-line-begin">&lt;222&gt;</span>
<span>wew</span>
<span class="span-line-end">&lt;/222&gt;</span>
<span class="span-line-end">&lt;/111&gt;</span>weqwe

<div id="triangle_right"></div>

</body>

</html>